Node (tiptap)
GPT-4o.icon
これは Tiptap（ProseMirror をベースにしたエディタフレームワーク）の Node API の解説です。
ざっくり言うと「Tiptap では自分でノード（要素）を定義してエディタの機能を拡張できる」という話ですね。
1. Node とは
Node = エディタ内の構造の最小単位（HTML のタグに近い）
例: 段落（<p>）、見出し（<h1>）、コードブロック（<pre>）など
Block ノード: 段落・見出しのように独立した行を持つ
Inline ノード: リンクや画像のように文中に埋め込まれる
Tiptap では Node.create() を使って自作できます。
2. 基本的な構造
code:js
import { Node } from '@tiptap/core'
const CustomNode = Node.create({
name: 'customNode', // ノード名
addOptions() {
return {
HTMLAttributes: {}, // HTML出力時に追加される属性
}
},
parseHTML() {
return [
{ tag: 'div' }, // HTMLをパースするときに対応するタグ
]
},
renderHTML({ HTMLAttributes }) {
},
})
parseHTML()
HTML → Node に変換する際のルール
ProseMirror の parseDOM に対応
ペースト時などに使われる
renderHTML()
Node → HTML に変換する際のルール
ProseMirror の toDOM に対応
コピーや保存時などに使われる
addOptions()
ノードの動作や見た目をカスタマイズ可能なオプションを定義
4. Node の主なオプション
Node を作るときは ProseMirror の schema 設定に相当するプロパティを指定できます。
table:_
オプション 意味
content 子ノードの構造 ("block+" = ブロック要素1つ以上)
marks 中で許可するマーク（太字・斜体など）
group このノードのグループ（例: block, inline）
inline インラインノードかどうか
atom 編集不可の塊として扱う
selectable ノード単位で選択できるか
draggable ドラッグ可能か
code コードとして扱う（改行やコマンド挙動が変わる）
whitespace 空白処理（"normal" or "pre"）
topNode 最上位ノードとして扱うか
isolating 編集時にこのノードをまたいだ操作を制限
linebreakReplacement 改行ノードの代替として使う
defining コンテキスト・内容の境界として扱う
5. 高度な使い方 — addNodeView
通常は HTML のレンダリングで済みますが、NodeView を使うと JavaScript を組み合わせた複雑なUIも作れます。
例: 画像ノードにクリックイベントを付ける
code:js
const CustomImage = Image.extend({
addNodeView() {
return () => {
const container = document.createElement('div')
container.addEventListener('click', () => {
alert('clicked')
})
const content = document.createElement('div')
container.append(content)
return {
dom: container, // 表示するDOM
contentDOM: content, // 子ノードを描画するDOM
}
}
},
})
NodeView を使うとチェックボックス付きタスク項目やカスタムUIパーツも実装可能。